import React from 'react';
import {Radio, Icon, Progress, List,Pagination, Avatar, Input,Card} from 'antd';
import styles from './index.less';
import {TimeSpan} from '../../utils';
let TimeOutIt = null;
export default class Pages extends React.Component {

    constructor (props){
        super(props);
        this.state ={
            time :TimeSpan(Date.parse(new Date())),
        };
    }
    componentWillMount () {
        // this.props.dispatch({type:"dashboard/getGZT"});
        this.props.dispatch({type:"dashboard/getworking"});
    }

    componentDidMount (){
        // let TimeOut = ()=>TimeOutIt = setTimeout(()=>{this.setState({time:TimeSpan(Date.parse(new Date()))});TimeOut();},1000);
        // TimeOut();
    }

    componentWillUnmount (){
        // clearTimeout(TimeOutIt);
    }
    render (){
        let {getGZTData,One,dispatch} = this.props;
        let userInfor = JSON.parse(localStorage.getItem('userInfor'));
        return(
            <div>
                <h2 className={styles.title}>
                    <div style={{display:'flex'}}>
                        <div className={styles.titleLeft}/>
                        工作台
                    </div>
                    <div>
                        <iframe width="256" scrolling="no"
                            height="30" style={{border:'none'}} allowtransparency="true"
                            src="http://i.tianqi.com/index.php?c=code&id=1&icon=1&py=huangshi&wind=0&num=1&site=14"></iframe>
                    </div>
                </h2>
                <div className={styles.header}>
                    <div style={{display:'flex'}}>
                        <div><Avatar size={64} icon="user" /></div>
                        <div>
                            <h2 style={{marginLeft:30}}>您好,{userInfor && userInfor.userName? userInfor.userName:'管理员'},祝您开心每一天.</h2>
                            <span style={{marginLeft:30}}>{userInfor && userInfor.duty ? userInfor.duty:""}</span>
                        </div>
                    </div>
                    <div style={{display:'flex',textAlign:'center'}}>
                        <div style={{paddingRight:10,borderRight:'1px solid #F5f5f5'}}>
                            <p>未完成任务</p>
                            <span style={{fontSize:20,color:'#000'}}>21</span>
                        </div>
                        <div style={{marginLeft:10}}>
                            <p>完成任务</p>
                            <span style={{fontSize:20,color:'#000'}}>
                                9
                                <span style={{fontSize:14,color:'#aaa'}}>
                                    /66
                                </span>
                            </span>
                        </div>
                    </div>
                </div>
                <Card style={{marginTop:-16}} title="任务列表" extra={
                    <div style={{display:'flex'}}>
                        <Radio.Group defaultValue="全部" onChange={e => {
                            e.target.value == '全部'?
                                this.props.dispatch({type:"dashboard/getworking"}):
                                this.props.dispatch({type:"dashboard/getworking",payload:{finished:e.target.value}});
                        }} buttonStyle="solid">
                            <Radio.Button value="全部">全部</Radio.Button>
                            <Radio.Button value={false}>未完成</Radio.Button>
                            <Radio.Button value={true}>完成</Radio.Button>
                        </Radio.Group>
                        <Input placeholder="请输入" style={{width:200,marginLeft:10}} addonAfter={ <Icon type="search" />}/>
                    </div>
                }>
                    <div style={{height:'36vh',overflow:'auto'}}>
                        {/*--------------------新任务列表--------------------*/}
                        {(One && One.length > 0) && <List
                            itemLayout="horizontal"
                            dataSource={One}
                            renderItem={item => (
                                <List.Item>
                                    <List.Item.Meta title={<a onClick={()=>{
                                        localStorage.setItem('id_working',item.processInstanceId);
                                        localStorage.setItem('id',item.businessKey);
                                        dispatch({type:"app/goToPath",payload:'home_list'});
                                    }}>{item.completed ?'完成':'等待中'}--{item.processDefinitionName}</a>}
                                    description={`${item.businessName }`}
                                    />
                                    <div style={{width:"100%",display:'flex',justifyContent:'space-between',marginRight:30}}>
                                        <div>
                                            <p>发起人</p>
                                            <span>{item.userName}</span>
                                        </div>
                                        <div>
                                            <p>开始时间</p>
                                            <span>{TimeSpan(item.startTime).replace("T"," ")}</span>
                                        </div>
                                        <div>
                                            <p>{item.completed ?'完成':'未完成'}</p>
                                        </div>
                                    </div>
                                </List.Item>
                            )}
                        />}
                    </div>
                    {/*-------------------------旧日历---------------------------*/}
                    {
                        false && getGZTData.map((item,index)=>{
                            return <Card.Grid key={index} style={{width:'25%'}}>
                                <div style={{fontSize:18}}>
                                    <b>标题:</b>
                                    <span style={{marginLeft:10}}>{item.scheduleName}</span>
                                </div>
                                <br/>
                                <div style={{color:'gray',height:40,overflow:'auto'}}>{item.scheduleAddress}</div>
                                <div style={{marginTop:10,float:'right'}}>{TimeSpan(item.endTime)}</div>
                            </Card.Grid>;
                        })
                    }
                </Card>
            </div>
        );
    }
}
